<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="../js/axios.min.js"></script>
  <script src="../js/api.js"></script>
  <style>
    input {
      margin: 0;
      padding: 0;
    }

    br {
      padding: 0;
      margin: 0;
    }

    #reg_box {
      width: 990px;
      height: 650px;
      background: #fff;
      margin: 70px auto;
    }

    .box_top {
      height: 115px;
    }

    .box_bottom>p {
      text-align: center;
    }

    .box_bottom>span {
      text-align: left;
    }

    .box_bottom>div {
      width: 300px;
      margin: 0 auto;
    }

    .box_bottom>div>input {
      box-sizing: border-box;
      width: 300px;
      height: 40px;
      text-indent: 5px;
      border: 1px solid #ccc;
      margin: 5px 0;
    }

    .box_bottom>div :last-child {
      background: #b32424;
      color: white;
      border: none;
    }

    .box_bottom>p {
      font-size: 28px;
      text-align: center;
    }

    #reg_box>p {
      font-size: 12px;
      color: #999;
      text-align: center;
    }
  </style>
</head>

<body style="background-color: #fafafa">
  <div id="reg_box">
    <div class="box_top">
      <a href="./index.html"><img src="https://pu.wbiao.cn/public/images/1/logo-icon.png" alt="图片无法加载" /></a>
      <a href="./index.html">
        <img src="https://static.wbiao.co/p/pc/images/1/slogan-0224.png" alt="" />
      </a>
    </div>
    <div class="box_bottom">
      <p>注册万表会员</p>
      <div>
        <input type="text" placeholder="请输入用户名" /><br />
        <span></span><br />
        <input type="password" placeholder="请设置密码" /><br />
        <span></span><br />
        <input type="password" placeholder="请再次输入密码" /><br />
        <span></span><br />
        <input type="button" value="立即注册" />
      </div>
    </div>
    <p>
      点击“立即注册”，即表示您同意并愿意遵守<a href="#">万表网用户协议</a>
    </p>
  </div>
</body>
<script>
  /* $(".box_bottom").click(function () {
    console.log("88");
    if ($("input:eq(1)").val().length < 11) {
      $("span:eq(1)").html("长度不足");
    }
  }); */
  let isname = false;
  let ispassword = false;
  let res = false;
  $(".box_bottom input:eq(0)").focus(() => {
    $("span:eq(0)").css("color", "gray");
    $("span:eq(0)").html("区分大小写 数字字母下划线 请以字母开头 6-16位");
    isname = false;
  });
  $(".box_bottom input:eq(0)").blur(() => {
    console.log("996");
    if (
      $(".box_bottom input:eq(0)").val().length < 6 &&
      $(".box_bottom input:eq(0)").val().length > 0
    ) {
      $("span:eq(0)").html("长度不足");
      $("span:eq(0)").css("color", "red");
      isname = false;
    } else if ($(".box_bottom input:eq(0)").val().length <= 0) {
      $("span:eq(0)").html("");
      isname = false;
    } else if (
      $(".box_bottom input:eq(0)").val().length < 16 &&
      $(".box_bottom input:eq(0)").val().length >= 6
    ) {
      let reg = /^[a-zA-Z]+\w{5,16}$/;
      if (reg.test($(".box_bottom input:eq(0)").val()) == true) {
        /* 验证用户名 */
        $.get(
          checkusernameAPI,
          { username: $(".box_bottom input:eq(0)").val() },
          function (res) {
            console.log(res);
            if (res.msg.indexOf("存在") != -1) {
              $("span:eq(0)").css("color", "red");
              isname = false;
            } else {
              $("span:eq(0)").css("color", "green");
              isname = true;
            }
            $("span:eq(0)").html(res.msg);
          }
        );
      } else {
        $("span:eq(0)").html("格式错误");
        $("span:eq(0)").css("color", "red");
        isname = false;
      }
    }
  });
  /*




  */
  $(".box_bottom input:eq(1)").focus(() => {
    $("span:eq(1)").css("color", "gray");
    $("span:eq(1)").html("区分大小写 数字字母下划线 请以字母开头 6-16位");
    ispassword = false;
  });
  $(".box_bottom input:eq(1)").blur(() => {
    console.log("996");
    if (
      $(".box_bottom input:eq(1)").val().length < 6 &&
      $(".box_bottom input:eq(1)").val().length > 0
    ) {
      $("span:eq(1)").html("长度不足");
      $("span:eq(1)").css("color", "red");
      ispassword = false;
    } else if ($(".box_bottom input:eq(1)").val().length <= 0) {
      $("span:eq(1)").html("");
      ispassword = false;
    } else if (
      $(".box_bottom input:eq(1)").val().length < 16 &&
      $(".box_bottom input:eq(1)").val().length >= 6
    ) {
      let reg = /^[a-zA-Z]+\w{5,16}$/;
      if (reg.test($(".box_bottom input:eq(1)").val()) == true) {
        /* 验证用户名 */
        $("span:eq(1)").html("格式正确");
        $("span:eq(1)").css("color", "green");
        ispassword = true;
      } else {
        $("span:eq(1)").html("格式错误");
        $("span:eq(1)").css("color", "red");
        ispassword = false;
      }
    }
  });
  /* 
  
  */
  $(".box_bottom input:eq(2)").blur(() => {
    console.log(
      $(".box_bottom input:eq(1)").val(),
      $(".box_bottom input:eq(2)").val()
    );
    if ($(".box_bottom input:eq(2)").val().length != 0) {
      if (
        $(".box_bottom input:eq(1)").val() ==
        $(".box_bottom input:eq(2)").val()
      ) {
        $("span:eq(2)").html("两次输入一致");
        $("span:eq(2)").css("color", "green");
        res = true;
      } else {
        $("span:eq(2)").html("两次输入不一致");
        $("span:eq(2)").css("color", "red");
        res = false;
      }
    }
  });
  $(".box_bottom input:eq(3)").click(() => {
    if (((res == isname) == ispassword) == true) {
      let username = $(".box_bottom input:eq(0)").val();
      let password = $(".box_bottom input:eq(1)").val();
      console.log(name, password);
      //      username  用户名
      //      password  密码
      $.get(regAPI, { username, password }, function (res) { })
      alert("注册成功");
      location.href = "./login.html";
    }
  });
</script>

</html>